---
title: Project Configuration
description: The configuration options for a Jaspr project.
---

---

Each Jaspr project is a normal Dart project including a `pubspec.yaml` file and `lib/` directory.

The project-wide Jaspr configuration is specified in `pubspec.yaml` under the `jaspr` option:

```yaml
name: my_project
...

jaspr:
  mode: static
  target: lib/main.dart
  port: 8080
```

There are currently the following configuration options available:

<Property name="mode" type="Enum" required>

  Sets the [**Rendering Mode**](/get_started/modes) for your project. Either `static`, `server` or `client`.
</Property>

---

<Property name="target" type="String | List<String>" optional>

  *Only applicable in "static" or "server" mode.*

  Specifies one or multiple **entry points** for your project. This is optional and defaults to "lib/main.dart" if not set. Use this to define one or more different entry points if needed.

  Can be used either with a single file-path, or a list of paths.

  ```yaml
  jaspr:
    target: bin/main.dart
  ```
  ```yaml
  jaspr:
    target:
      - lib/main_prod.dart
      - lib/main_staging.dart
  ```

  When defining multiple entry-points, use the `--input` flag with `jaspr serve` and `jaspr build` to choose the desired one when serving or building your app.
</Property>

---

<Property name="port" type="int" optional>

  *Only applicable in "static" or "server" mode.*

  Specifies the target port to use when **serving** your project. This is optional and defaults to "8080" if not set. Can be overridden by the `--port` flag with `jaspr serve`.
</Property>

---

## Project Structure

Depending on your chosen [**Rendering Mode**](/get_started/modes) and [**Hydration**](/concepts/hydration) settings,
your Jaspr project will have a slightly different project structure.

### Static/Server Mode with Automatic Hydration

```markdown
├── lib/
│   ├── components/
│   │   ├── counter.dart
│   │   └── ...
│   ├── pages/
│   │   ├── home.dart
│   │   └── ...
│   ├── app.dart
│   ├── ...
│   ├── jaspr_options.dart
│   └── main.dart
├── web/
│   └── images/
│       └── ...
├── pubspec.lock
└── pubspec.yaml
```

- The `lib` directory contains all your usual dart code, including components, pages, routes etc.
  depending on your architecture.

- The `lib/main.dart` file is the entry point for your **server** application. It calls `runApp()`
  and provides your root document component.

  Any component annotated with [`@client`](/api/utils/at_client) that is built during pre-rendering will automatically be hydrated on the client.

- The optional `lib/jaspr_options.dart` is auto-generated by Jaspr's tooling. It exposes a top-level `defaultJasprOptions`
  that you should provide to the `Jaspr.initializeApp(options: ...)` call inside `lib/main.dart`.

- The `web` directory contains any static assets you want to access from your website, like images or fonts.
  Files inside this directory are later accessible through their relative url, e.g. `<domain>/images/logo.png`.

---

### Static/Server Mode with Manual Hydration

```markdown
├── lib/
│   ├── components/
│   │   ├── counter.dart
│   │   └── ...
│   ├── pages/
│   │   ├── home.dart
│   │   └── ...
│   ├── app.dart
│   ├── ...
│   └── main.dart
├── web/
│   ├── images/
│   │   └── ...
│   └── main.dart
├── pubspec.lock
└── pubspec.yaml
```

- The `lib` directory contains all your usual dart code, including components, pages, routes etc.
  depending on your architecture.

- The `lib/main.dart` file is the **server** entry point for your application. It calls `runApp()`
  and provides your root document component.

- The `web` directory contains any static assets you want to access from your website, like images or fonts.
  Files inside this directory are later accessible through their relative url, e.g. `<domain>/images/logo.png`.

  Additionally, any `.dart` file in here will be compiled to js and accessible through `<domain>/<filename>.dart.js`.

- The `web/main.dart` file is the **client** entry point for your application. It calls `runApp()` and provides
  the main app component, hydrating the pre-rendered html created by the server.

---

### Client Mode

```markdown
├── lib/
│   ├── components/
│   │   ├── counter.dart
│   │   └── ...
│   ├── pages/
│   │   ├── home.dart
│   │   └── ...
│   └── app.dart
├── web/
│   ├── images/
│   │   └── ...
│   ├── index.html
│   ├── styles.css
│   └── main.dart
├── pubspec.lock
└── pubspec.yaml
```

- The `lib` directory contains all your usual dart code, including components, pages, routes etc.
  depending on your architecture.

- The `web` directory contains any static assets you want to access from your website, like images or fonts.
  Files inside this directory are later accessible through their relative url, e.g. `<domain>/images/logo.png`.

  Additionally, any `.dart` files in here will be compiled to js and accessible through `<domain>/<filename>.dart.js`.

- The `web/index.html` file (along with other html and css files) contains the static markup and styling for your website.

- The `web/main.dart` file is the entry point for your application. It calls `runApp()` and provides
  the main app component.
